<template>
  <div class="container">
    <div class="top">
      <div class="logoWrap">
        <a href="#/">
          <Logo class="logo" :height="48" :width="48"></Logo>
          <span class="title">学创校园</span>
        </a>
      </div>
      <div class="desc">
        学创校园后台——专注于校园生态建设，打造学习和创业的校园平台！
      </div>
    </div>
    <div class="main">
      <Tabs value="name1" class="tabs">
        <!--账户密码登录  -->
        <TabPane label="账户密码登录" name="name1">
          <Alert type="error" show-icon v-if="showAlert">账户或密码错误</Alert>
          <Form :model="form" ref="account" :rules="rules">
            <FormItem prop="username">
              <Input v-model="form.username" autocomplete="off" type="text" placeholder="请输入账户名" size="large">
              <Icon type="ios-person-outline" slot="prepend" :size="18"></Icon>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input v-model="form.password" autocomplete="off" type="password" placeholder="请输入密码" size="large">
              <Icon type="ios-locked-outline" slot="prepend" :size="18"></Icon>
              </Input>
            </FormItem>
             <FormItem prop="captcha">
               <Row class="captchaWrap" >
                  <Col span="17">
                      <Input v-model="form.captcha" type="text"  @keypress.enter.native="signIn('account')" placeholder="请输入验证码" size="large">
                        <Icon type="ios-locked-outline" slot="prepend" :size="18"></Icon>
                      </Input>
                  </Col>
                  <Col span="7" class="imgWrap">
                      <img :src="form.captchaSrc" alt="" @click="getcaptchaSrc">
                  </Col>
               </Row>
            </FormItem>
            <FormItem class="additional">
              <Checkbox size="large">自动登录</Checkbox>
              <!-- <a class="forgot">忘记密码</a> -->
              <Button type="primary" long :loading="loading" size="large" style="margin-top:24px;" @click="signIn('account')" >登 录</Button>
            </FormItem>
          </Form>
        </TabPane>
        <!-- 手机号登录 -->
        <!-- <TabPane label="手机号登录" name="name2">
          <Form :model="form" ref="mobile" :rules="rules">
            <FormItem prop="phone">
              <Input v-model="form.phone" type="text" placeholder="手机号" size="large">
              <Icon type="iphone" slot="prepend" :size="18" style="width:14px;"></Icon>
              </Input>
            </FormItem>
            <FormItem prop="captcha">
              <Row type="flex" :gutter="8">
                <Col :span="16">
                <Input v-model="form.captcha" type="password" placeholder="验证码" size="large">
                <Icon type="ios-email-outline" slot="prepend" :size="18"></Icon>
                </Input>
                </Col>
                <Col :span="8">
                <Button size="large" long @click="getCapcha" :disabled="disabled">
                  <CountDown v-if="showCount" format="s" :target="target">
                    <template slot="suffix">s</template>
                  </CountDown>
                  <template v-else>获取验证码</template>
                </Button>
                </Col>
              </Row>
            </FormItem>
            <FormItem class="additional">
              <Checkbox size="large">自动登录</Checkbox>
              <a class="forgot">忘记密码</a>
              <Button type="primary" long :loading="loading" size="large" style="margin-top:24px;" @click="signIn('mobile')">登 录</Button>
            </FormItem>
          </Form>
        </TabPane> -->
      </Tabs>
      <!-- <div class="other">
        其他登录方式
        <span class="icon-alipay"></span>
        <span class="icon-taobao"></span>
        <span class="icon-weibo"></span>
        <a class="register" href="/user/register">注册用户</a>
      </div> -->
    </div>
    <GlobalFooter :links="footLinks" class="footer">
      <div slot="copyright">Copyright &copy; 2018 <strong>学创校园</strong> 团队出品</div>
    </GlobalFooter>
  </div>
</template>
<script>
import {Api,baseUrl} from './../../libs/Api'
import { GlobalFooter, CountDown, Logo } from '@/components'
export default {
  components: { GlobalFooter, CountDown, Logo },
  data() {
    return {
      showCount: false,
      disabled: false,
      target: 60000,
      showAlert: false,
      loading: false,
      isAuto:false,
      form: {
        username: '',
        password: '',
        captcha:'',
        captchaSrc:baseUrl+'/captcha.jpg',
        phone: '',
        captcha: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账户名！', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码！', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入手机号！', trigger: 'change' },
          { type: 'string', max: 11, message: '手机号格式错误！', trigger: 'change' }
        ],
        captcha: [
          { required: true, message: '请输入验证码！', trigger: 'change' }
        ]
      },
      // footLinks: [{ //底部tab链接
      //   title: '首页',
      //   href: '/'
      // }, {
      //   title: '文档',
      //   href: '/'
      // }, {
      //   title: 'gitee',
      //   href:'https://gitee.com/my13170253958/learning_to_create_a_campus.git',
      //   // href: 'https://gitlab.oneitfarm.com/ladybird/ui-nuclear',
      //   blankTarget: true
      // }]
      footLinks:[],
    }
  },
  mounted(){
  },
  methods: {
    getcaptchaSrc(){
      // this.form.captchaSrc=''
      this.form.captchaSrc=baseUrl+"/captcha.jpg?t="+(new Date()).getTime();
    },                      
    signIn(type) {//登录
      this.$refs[type].validate((valid) => {
        if (type === 'account') {
          if (valid) {
            this.loading = true;
              Api.login(this.form.username,this.form.password,this.form.captcha).then( res => {
                if(res.data.code=='0'){
                  setTimeout(() => {
                    this.$router.push({path:'/relesemg/releasemg1'})
                    this.loading = false
                  }, 300)
                }else{
                  setTimeout(() => {
                    this.$Message.info(res.data.msg)
                    this.loading = false
                  }, 300)
                }
              })
          } else {
            this.showAlert = false
          }
        } else {
          if (valid) {
            this.loading = true
            setTimeout(() => {
              this.$router.push('/')
            }, 500)
          }
        }
      })
    },
    getCapcha() {
      this.disabled = true
      this.showCount = true
      this.target = 59000
      setTimeout(() => {
        this.disabled = false
        this.showCount = false
      }, 59000)
    }
  }
}

</script>
<style lang="less">
.container {
  position: absolute;
  background: #f0f2f5;
  background-image: url(/static/img/loginBg.svg);
  width: 100%;
  height:100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .logoWrap {
    height: 44px;
    line-height: 44px;
    a {
      text-decoration: none;
    }
  }
  .top {
    text-align: center;
  }
  .title {
    font-size: 33px;
    color: rgba(0, 0, 0, 0.85);
    font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: 600;
    position: relative;
    top: 2px;
  }
  .desc {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 12px;
    margin-bottom: 40px;
  }
  .captchaWrap .ivu-input{
    width:calc(100% - 6px);
  }
  .captchaWrap .imgWrap{
    height:36px;padding:0;border:1px solid #dddee1;border-radius:4px;
  }
  .captchaWrap .imgWrap img{
    width:100%;height:100%;border-radius:4px;
  }

  .footer {
    position: absolute;
    bottom: 0;
  }
  .main {
    width: 368px;
    margin: 0 auto;
  }
}


</style>
